Involver Developer Network : Chapter 6 - Partials, late binding, and ajax

Involver Developer Network : Chapter 6 - Partials, late binding, and ajax_link

This page last changed on Apr 25, 2012 by jed.wheeler@involver.com.

In this Chapter:

Intro to the ?you_tube_feed feature block
Intro to Partials as a way to structure complex tabs
using ajax_link as a way to pass variables into a display partial.

Partials are one of the key building blocks for complex SML tabs and provide a fast and easy way to load and unload large amounts of content quickly, to pass variables to your feature blocks onclick, and to structure complex multi-page tabs.

Let’s start by building a basic you_tube_feed video display.

{% you_tube_feed name:"my_feed" %}

<div id="featured">
  {% youtube_video_embed you_tube_feed.featured_item autoplay:false width:500 height:400  %}
</div>
{% endyou_tube_feed %}

We can easily add some social functionality as well - let's add a text description of the video and a share button.

{% you_tube_feed name:"my_feed" %}

<div id="featured">
  {% youtube_video_embed parent.featured_item autoplay:false width:500 height:400  %}
  <div class="text">
    <h3>{{you_tube_feed.featured_item.title}}</h3>
    {% facebook_like send:true parent.featured_item %}
    <div class="description">
      {{parent.featured_item.summary_text_body}}
    </div>
  </div>
</div>
{% endyou_tube_feed %}

The first thing you’ll notice here is that this example does not use a for loop. Since we’re only embedding a single item instead of a set of items from an array, we can call the item directly by specifying you_tube_feed.featured_item.

Let's add a gallery of thumbnails to show some of the other videos in the feed

{% you_tube_feed name:"my_feed" %}

<div id="featured">
  {% youtube_video_embed parent.featured_item autoplay:false width:500 height:400  %}
  <div class="text">
    <h3>{{parent.featured_item.title}}</h3>
    {% facebook_like send:true parent.featured_item %}
    <div class="description">
      {{parent.featured_item.summary_text_body}}
    </div>
  </div>
</div>

<div class="gallery">
  {% paginate parent.content_items per_page:6 %}
  <div class="page_links">{{pagination_links}}</div>
  <ul class="block-list">
    {% for current_vid in content_items %}
      <li>
        <div class="thumb">{{current_vid.thumbnail_url | img_tag:current_vid.title }}</div>
        <div class="thumb_desc">{{current_vid.title}}</div>
    </li>
    {% endfor %}
  </ul>
  {% endpaginate %}
</div>

{% endyou_tube_feed %}

The block-list css style we've used is one of the pre-built css styles that comes with the Involver platform and is documented in the SML CSS Reference. Everything else we've seen before in chapters 3 and 4. The problem now becomes, how do we allow the user to click one of those thumbnails and swap out the featured item? We do that using the partial and ajax_link tags.

The first step is building the partial

{% partial name:"featured" %}
  {% youtube_video_embed featured autoplay:false width:500 height:400  %}
  <div class="text">
    <h3>{{featured.title}}</h3>
    {% facebook_like send:true featured %}
    <div class="description">
      {{featured.summary_text_body}}
    </div>
  </div>
{% endpartial %}

{% you_tube_feed name:"my_feed" %}

<div id="featured">
  {% render partial:"featured" featured:you_tube_feed.featured_item %}
</div>

<div class="gallery">
  {% paginate parent.content_items per_page:6 %}
  <div class="page_links">{{pagination_links}}</div>
  <ul class="block-list">
    {% for current_vid in content_items %}
      <li>
        <div class="thumb">{{current_vid.thumbnail_url | img_tag:current_vid.title }}</div>
        <div class="thumb_desc">{{current_vid.title}}</div>
    </li>
    {% endfor %}
  </ul>
  {% endpaginate %}
</div>

{% endyou_tube_feed %}

With this code into your template you should see no change in the end user’s experience - but that doesn’t mean nothing has changed. Let’s take a moment and consider what we’ve done.

We’ve taken the player and the share and taken them out of our feature block and moved them into a partial which we’ve named "featured". We've also changed how the featured item is called, using a new custom variable (which we've named "featured" for convenience) whose value is set in the render tag.

So whichever item we assign to the featured_item variable in our render tag will be the item that shows up in our player and whose attributes will be inherited by the facebook_like tag. This gives us the ability to use the ajax_link tag to change the value of featured_item and display other videos.

Let’s do that now.

{% partial name:"featured" %}
  {% youtube_video_embed featured autoplay:false width:500 height:400  %}
  <div class="text">
    <h3>{{featured.title}}</h3>
    {% facebook_like send:true featured %}
    <div class="description">
      {{featured.summary_text_body}}
    </div>
  </div>
{% endpartial %}

{% you_tube_feed name:"my_feed" %}

<div id="featured">
  {% render partial:"featured" featured:parent.featured_item %}
</div>

<div class="gallery">
  {% paginate parent.content_items per_page:6 %}
  <div class="page_links">{{pagination_links}}</div>
  <ul class="block-list">
    {% for current_vid in content_items %}
      <li>
        <div class="thumb">
          {% ajax_link partial:"featured" container:"featured" featured:current_vid %}
          {{current_vid.thumbnail_url | img_tag:current_vid.title }}
          {% endajax_link %}
        </div>
        <div class="thumb_desc">{{current_vid.title}}</div>
    </li>
    {% endfor %}
  </ul>
  {% endpaginate %}
</div>

{% endyou_tube_feed %}

Unlike other for loops we’ve used in the past, the for loop in vidlist isn’t used for displaying the actual content, it’s used to create a series of thumbnails we can click on to display the content in our flash player. It does that by creating a set of unique ajax_links, one for each item. When clicked on, those ajax links use SML’s baked-in javascript to replace the contents of the "featured" div with the contents of the "featured" partial and change the value of featured item in that partial to match the content item that was clicked on.

Let's work with this a bit more. Cut the ?you_tube_feed exercise out of your template editor and set it aside in your external editor for later use and grab the ending rss_feed code from ?Chapter 4 - Advanced for loops and Pagination. It should look something like this:

{% rss_feed name:"my_feed" %}
     {% for source in rss_feed.sources %}
          <h3>{{ source.title }}</h3>
          <p><a href="{{source.origin_url}}">Subscribe to this Feed</a></p>

          {% paginate source.feed_items page_links:false per_page:3 %}
               {% for item in feed_items %}
                    <div>
                         <h4><a href="{{ item.origin_url }}">{{ item.title }}</a></h4>
                         <p>{{ item.summary_text_body | strip_html | truncate: 140 }}</p>
                    </div>

                    {% facebook_like item send:true %}
               {% endfor %}

               {{ pagination_links }}
          {% endpaginate %}
     {% endfor %}
{% endrss_feed %}

Let's apply some of our new pagination tools to this code to add some additional functionality

{% partial name:"sortFeed" %}
{% paginate source.feed_items per_page:3 order:sortBy %}
<div>{{pagination_links}}</div>
  <ul>
    {% for post in feed_items %}
    <li>
      <h4>{{post.title}}</h4>
      {% if post.author.size > 0  %}
      <p> By {{post.author }}</p>
      {% endif %}
    
      <p>{{post.summary_text_body | truncate:240 }}<br/>
        <a htref="{{post.origin_url}}">Read More</a></p>  
      {% facebook_like post send:true %}
    </li>
    {% endfor %}
  </ul>  
{% endpaginate %}
{% endpartial %}

{% rss_feed name:"philips" %}
{% for source in rss_feed.sources %}
<h3>{{source.title}}</h3>
<a href="{{source.origin_url}}">Subscribe to this feed</a>

  {% capture currentID %}sortedList_{{source.id}}{% endcapture %}
  
  <div class="sort_links">
    <ul>
      <li>{% ajax_link partial:"sortFeed" container:currentID source:source sortBy:"created_at DESC" %}Show Newest Items First{% endajax_link %}</li>
      <li>{% ajax_link partial:"sortFeed" container:currentID source:source sortBy:"created_at ASC" %}Show Oldest Items First{% endajax_link %}</li>
      <li>{% ajax_link partial:"sortFeed" container:currentID source:source sortBy:"fb_like_count DESC" %}Show Most Popular{% endajax_link %}</li>
    </ul> 
  </div>  
  
  <div id="{{currentID}}">
    {% render partial:"sortFeed" source:source sortBy:"created_at DESC" %}
  </div>

{% endfor %}
{% endrss_feed %}

Advanced users have additional options for loading and unloading ??partials. By using ?sml.tag.Partial you can nest partial loads into javascript functions and even pass variables from Javascript into SML.